iT邦幫忙

2019 iT 邦幫忙鐵人賽

DAY 5
3
Modern Web

🍐放學後的網頁開發系列 第 5

[Day5] 柚子放學後的網頁生活 - ES6

  • 分享至 

  • xImage
  •  

上幾篇介紹完接case的心得和網站規劃
今天要來寫點程式囉 !
可以跟著下面範例 都很好上手哦

歡迎來到放學後的網頁生活 ~

本篇想跟各位分享ES6,全名ECMAScript 6,於 2015 年 6 月正式發佈。 ES6 除了在功能上更為成熟穩定之外,也可以簡化過去的寫法,在本文我會做一些比較,讓各位知道差異的地方,那讓我們看下去吧~~

Inside ES6

JS 每年都有持續在更新,以ES6做為一個分水嶺經歷較大的更新,以下為本文目錄:

  1. Let & Var & Const
  2. String Template
  3. Arrow Function
  4. Destructure assignment
  5. Spread operator
  6. Inheritance

Let & Var & Const

let vs var

比較:let 在函式或條件式內外,變數不會受到影響,Var 會

Example of Var

var a = 5;

for(var a =1;a<10;a++){
    var b = 10;
    console.log(a);
}
console.log('a',a);
console.log('b',b);

output => a 10 (被迴圈內給改變)
output => b 10

If use let ?

let a = 5;
for(let a =1;a<10;a++){
let b = 10;
console.log(a);
}
console.log('a',a);
console.log('b',b);

output==>a 5 
output==>b X => 會有error 因外部沒有宣告

再來一個範例

for ( let a = 1 ; a<10 ; a++ ){
setTimeout(function(){
       console.log(a);
      } , a*1000 );
}

output==>1..2..3..4....9(皆間隔一秒)

let VS const

比較:宣告的變數若為const則後面不可再做更改,但 let 可以

Ex:
let a = 1;
const b = 1;

a=2;
b=2;

output ==> Assignment to constant variable

但...還是有意外!

//如果是物件的話就可以

const a = [1,2,3,4,5];
a[5] = 6;
console.log(a);

const 這樣會 error 嗎? 不會!

output => [1,2,3,4,5,6]
//因為這邊的a是by reference非by value ( 不是單純數字、文字 )

再來個練習

const person={
name:'David'
}

person.age = 20;

output=>{name:"David",age:20}
//一樣會成功哦,同理如上

經過這些小範例,應該更清楚這三個的差別囉,自己可以試著寫寫看哦

String Template

在 ES6 我們多了一個很方便的模版字符串(template literal),什麼情況下會用到呢?

  1. 在 JS 中放入 HTML
  2. 很長的字串且包含換行
  3. 字串連結變數

首先如果不是ES6的話,我們想要嵌入變量

var david = 'David';

function hello(name){
console.log('Hello'+name);
}

hello(david);

那在ES6最關鍵的就是內部改為 ` 號(在鍵盤左上角)
並透過 $ { ... } 這樣的方式,可以嵌入變量或任何的表達式

var david = 'David';

function hello(name){
console.log(`Hello ${name}`);
}

hello(david);

以上兩者都會有一樣的output哦~ Hello david

你以為只有這樣嗎

倘若是字串相接的話會方便許多
先回憶一下過去我們怎麼做字串相接

//非ES6
var paragraph = 'abc bcd\n';
paragraph += 'efg hij\n';
paragraph += 'klm nop\n';
console.log(paragraph);

output=>
abc bcd
efg hij
klm nop

是否覺得很多餘呢
那在ES6可以很直覺的寫在一起 !

//ES6
const paragraph = `
abc bcd
efg hij
klm nop
`
console.log(paragraph);

output=>
abc bcd
efg hij
klm nop
//會發現結果相同哦!!

不只如此,還記得怎麼加入HTML呢 ?

假設我們想在Header內建一個div裡面存自己的照片,過去可以這樣寫:

//非ES6
let HTMLcontent = '<header>\n'+
                  '<div class="banner">\n'+
                  '<img src="dayo.jpg"\n'+
                  '</div>\n'+
                  '</header>'

那像剛剛上面那樣,是不是就可以直接省略?

let HTMLcontent = `
<header>
    <div class='banner'>
        <img src="dayo.jpg>
    </div>
</header>
`

直接在前後加上 ` 的符號裡面就像平常寫HTML一樣就好囉,真的超方便阿 !

各位同學可以複習上面的內容,希望能有感覺,將過去的扣改寫哈哈
明天會繼續介紹Arrow Function、Destructure assignment ~

下課囉 ~ 請鎖定 ?放學後的網頁生活


上一篇
[Day4] 柚子放學後的網頁生活 - Web planning
下一篇
[Day6] 柚子放學後的網頁生活 - ES6 #2
系列文
🍐放學後的網頁開發30
圖片
  直播研討會
圖片
{{ item.channelVendor }} {{ item.webinarstarted }} |
{{ formatDate(item.duration) }}
直播中

1 則留言

0
fx777
iT邦新手 5 級 ‧ 2018-10-20 12:33:05

之前看過一篇很棒的文章講述 var, let, const 背後的 TDZ 機制~

https://segmentfault.com/a/1190000008213835

我要留言

立即登入留言